<template>
  <div>
      <!-- 操作dom -->
      <!-- 局部 -->
      <!-- 全局 -->
      <!-- <h3 v-abc>自定义指令</h3>
      <input v-ipt="123" type="text"> -->

      <input v-if="flag" v-ipt v-model="val" type="text">

      <div>
          <button @click="flag = false">点我</button>
      </div>

      <!-- 真实dom -->
      <!-- <p id="pp" class="title"></p> -->
      <!-- 虚拟dom -->
      <!-- let obj = {
          tagName: "p",
          props: {
              id: "pp",
              class: "title"
          }
      } -->
  </div>
</template>

<script>
export default {
    data() {
        return {
            val: "",
            flag: true
        }
    },
    directives: {
        // ipt(el, option) {
        //     el.value = option.value
        //     console.log(el, option)
        // }

        // 自定义指令第二种方式
        ipt: {
            // 
            bind(el, option) {
                console.log('检测到第一次绑定自定义指令, 只会执行一次')
            },
            inserted(el, option) {
                el.focus()
                console.log('父节点dom结构生成完毕')
            },
            update() {
                console.log('绑定的节点中的虚拟dom发生改变的时候会执行')
            },
            componentUpdated() {
                 console.log('绑定的节点中的更新完毕')
            },
            unbind() {
                console.log('自定义指令于dom元素进行解绑')
            }
        }
    },
    // mounted() {
    //     console.dir(document.getElementById('pp'))
    // }
}
</script>

<style>

</style>